<html>
    <head>
        <title>基础</title>
    </head>
    <script>
         // 一、基础
                                  /*
                                        Vue推荐在绝大多数情况下使用模板来创建你的HTML。
                                        然而在一些场景中，你真的需要JavaScript的完全编程的能力。
                                        这时候，你可以使用 "渲染函数" ,它比模板更接近编译器！
                                  */            

                                  // 让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：
                                        /*
                                            <h1>
                                                 <a name="hello-world" href="#hello-world">
                                                    Hello world!!
                                                 </a>
                                            </h1>


                                            对于上面的HTML，你决定这样定义组件接口：

                                                <anchored-heading :level="1">Hello world! </anchored-heading>


                                            当开始写一个只能通过 level prop 动态生成标题的组件时，你可能很快想到要这样实现：
                                                
                                                <script type="text/x-template" id="anchored-heading-template">
                                                    <h1 v-if="level===1">
                                                        <slot></slot>
                                                    </h1>
                                                    <h2 v-else-if="level===2">
                                                        <slot></slot>
                                                    </h2>
                                                    <h3 v-else-if="level===3">
                                                        <slot></slot>
                                                    </h3>
                                                    <h4 v-else-if="level===4">
                                                        <slot></slot>
                                                    </h4>
                                                    <h5 v-else-if="level===5">
                                                        <slot></slot>
                                                    </h5>
                                                    <h6 v-else-if="level===6">
                                                        <slot></slot>
                                                    </h6>
                                                <-/script>
                                        */
                                        Vue.component('anchored-heading',{
                                                    template:'#anchored-heading-template',
                                                    props:{
                                                        level:{
                                                            type:Number,
                                                            required:true
                                                        }
                                                    }
                                                })

                                    /*
                                        这里用模板并不是最好的选择： 不但代码冗长，而且在每一个级别的标题中重复书写了<slot></slot>,
                                        在要插入锚点元素是还要再次重复。
                                    */

                                    /*
                                        虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。
                                        那么，我们来尝试使用"render函数"重写上面的例子：
                                    */ 
                                                Vue.component('anchored-heading',{
                                                    render:function(createElement){
                                                        return createElement(){
                                                            'h'+this.level,  //标签名称
                                                            this.$slots.default // 子节点数组 
                                                        }
                                                    },
                                                    props:{
                                                        level:{
                                                            type:Number,
                                                            required:true
                                                        }
                                                    }
                                                });

                                    /*
                                        看起来简单多了！ 这样代码精简很多，但是需要非常熟悉Vue的实例属性。
                                        在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world! 。
                                        这些子节点被存储在组件实例中的 $slots.default中。
                                        (其实就是，使用组件时，插入的标签，不再具名插槽"v-slot"声明所在插槽，就在默认插槽中)
                                    */

                                    // 所以，渲染函数的本质是： 用JavaScript的编程能力来代替模板的"所有功能"
                                    // 也就是说，所有在模板中能实现的，在渲染函数中也能通过JavaScript来实现
    </script>
</html>